<template>
	<view class="manualAdd">
		<view class="van-form">
			<view class="header-title">发票详情</view>
			<view class="form-item">
				<uni-forms :modelValue="formData" label-position="left" :rules="rules" label-width="180rpx" >
					<uni-forms-item class="forms_item" label="发票类型" required >
						<uni-data-select style="po" v-model="formData.typeCode" :clear="false"   :localdata="data.labelList" @change="change"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item class="forms_item" label="发票代码" required name="code">
						<uni-easyinput type="text" v-model="formData.code" placeholder="请输入发票代码" />
					</uni-forms-item>
					<uni-forms-item class="forms_item" label="发票号码" required name="num">
						<uni-easyinput type="text" v-model="formData.num" placeholder="请输入发票号码" />
					</uni-forms-item>
					<uni-forms-item class="forms_item" label="金 额" required name="allMoney">
						<uni-easyinput type="number" v-model="formData.allMoney" placeholder="请输入金额" />
					</uni-forms-item>
					<uni-forms-item class="forms_item" label="卖 方" required name="seller">
						<uni-easyinput type="text" v-model="formData.seller" placeholder="请输入卖方" />
					</uni-forms-item>
					<uni-forms-item class="forms_item" label="日 期" required name="date">
						<uni-datetime-picker type="date" :value="formData.date" @change="datechange" />
					</uni-forms-item>
					<uni-forms-item class="forms_item" label="买 方" required name="purchaser">
						<uni-easyinput type="text" v-model="formData.purchaser" placeholder="请输入买方" />
					</uni-forms-item>
					<uni-forms-item class="forms_item" label="税 率" required name="taxRate">
						<uni-easyinput type="text" v-model="formData.taxRate" placeholder="请输入税率" />
					</uni-forms-item>
					<uni-forms-item class="forms_item" label="税 额" required name="taxAmount">
						<uni-easyinput type="text" v-model="formData.taxAmount" placeholder="请输入税额" />
					</uni-forms-item>
				</uni-forms>
			</view>
		</view>
		<!-- 附件 -->
		<view class="attachments">
			<view class="header-title" style="border-bottom:none">发票上传</view>
			<uni-file-picker class="file-picker" v-model="formData.imageValue" fileMediatype="image" mode="grid" @select="select"
				@progress="progress" @success="success" @fail="fail" />
		</view>
		<!-- 按鈕 -->
		<view class="button-list">
			<view class="button-item" style="background-color: #D4D4D4;" @click="cancel">取消</view>
			<view class="button-item" @click="submitForm">保存</view>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue';
import {invoiceAdd} from '@/api/invoice.js'

const data = reactive({
	labelList: [{ value: "增值税专用发票", text: "增值税专用发票" },
	{ value: "增值税普通发票", text: "增值税普通发票" },
	{ value: "增值税电子普通发票", text: "增值税电子普通发票" },
	{ value: "增值税普通发票（卷票）", text: "增值税普通发票（卷票）" },
	{ value: "增值税电子普通发票（通行费）", text: "增值税电子普通发票（通行费）" },
	{ value: "通用机打发票", text: "通用机打发票" },
	{ value:  "通用定额发票", text: "通用定额发票" },
	{ value: "旅游运输普票", text: "旅游运输普票" },
	{ value: "公路客运发票", text: "公路客运发票" },
	{ value: "船运客票", text: "船运客票" },
	{ value: "出租车发票", text: "出租车发票" },
	{ value: "停车费发票", text: "停车费发票" },
	{ value: "过路过桥费发票", text: "过路过桥费发票" },
	{ value: "医疗费收据", text: "医疗费收据" },
	{ value: "行程单", text: "行程单" },
	{ value: "火车票", text: "火车票" },
	{ value: "商户小票", text: "商户小票" }],
})



const change = (e) => {
	// console.log(e)
	formData.invoiceType = e.value
}

const datechange = (e) => {
	formData.invoiceDate = e;
}

//表單校验规则
const rules = reactive({
	num: {
		rules: [
			{ required: true, message: '请输入发票号码' }],
		label: '发票号码',
		validateTrigger: 'submitForm'
	}
})
//表单绑定数据
const formData = reactive({
	typeCode: '',
	code: "",
	num: "",
	allMoney: null,
	seller: "",
	date: "",
	purchaser: "",
	taxRate: "",
	taxAmount: null,
	imageValue:''
})

// 保存和取消
const submitForm = () => {
	invoiceAdd(formData).then(res=>{
		if (res.statusCode == 200) {
			uni.showToast({ title: res.message, icon: 'success' })
		}
	})
}
const cancel = () => {
	uni.navigateBack({
		delta: 1
	});
}


// 附件上传
const progress = (e) => {

}
const success = (e) => {

}
const fail = (e) => {

}
const select=(e)=>{

}
</script>

<style lang="less" scoped>
.manualAdd {
	height: calc(100vh - 88rpx);
	width: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: auto;

	.van-form {
		width: 96%;
		background: #fff;
		margin-left: 2%;
		margin-top: 12px;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;


		.form-item {
			flex: 1;
		}
	}
}

.header-title {
	height: 80rpx;
	line-height: 80rpx;
	padding-left: 20rpx;
	border-bottom: 2rpx solid #F7F8F9;
	font-size: 28rpx;
}

.forms_item {
	padding: 14rpx 20rpx;
	box-sizing: border-box;
	margin: 0 !important;
	border-bottom: 2rpx solid #F7F8F9;
}

.attachments {
	width: 96%;
	background: #fff;
	margin-left: 2%;
	margin-top: 12rpx;
	border-radius: 20rpx;

	.file-picker {
		display: block;
		margin-top: 12rpx;
		margin-left: 2%;
		height: 120rpx;
	}
}


:deep(.file-picker__box) {
	width: 120rpx !important;
	height: 120rpx !important;
	padding-top: 0;

	.file-picker__progress {
		display: none;
	}

	.icon-add {
		width: 20px;
		height: 2px;
		background-color: rgb(0, 0, 0);
	}
}

.button-list {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	display: flex;
	flex-direction: row;

	.button-item {
		width: 50%;
		height: 100%;
		text-align: center;
		font-size: 32rpx;
		background-color: #33C5B9;
		color: #fff;
	}
}
</style>>
